<template>
	<view class="container">

		<!-- 主要行动按钮 - 移到最上方 -->
		<view class="main-action-bar">
			<view
				v-for="(item, index) in mainActionButtons"
				:key="index"
				class="main-action-button"
				:style="{
					'--action-color': item.color,
					'--action-color-rgb': hexToRgb(item.color) ? `${hexToRgb(item.color).r}, ${hexToRgb(item.color).g}, ${hexToRgb(item.color).b}` : '59, 130, 246'
				}"
				@click="navigateToFunction(item)"
			>
				<view class="action-icon">
					<text class="action-icon-text">{{ item.icon }}</text>
				</view>
				<view class="action-content">
					<text class="action-title">{{ item.title }}</text>
				</view>
				<view class="action-arrow">
					<text class="arrow-icon">→</text>
				</view>
			</view>
		</view>

		<!-- 查看功能卡片网格 -->
		<view class="view-function-grid">
			<view
				v-for="(item, index) in viewFunctionList"
				:key="index"
				class="function-card"
				:style="{
					'--card-accent-color': item.color,
					'--card-accent-rgb': hexToRgb(item.color) ? `${hexToRgb(item.color).r}, ${hexToRgb(item.color).g}, ${hexToRgb(item.color).b}` : '248, 250, 252'
				}"
				@click="navigateToFunction(item)"
			>
				<view class="card-icon" :style="{ backgroundColor: item.color }">
					<text class="icon-text">{{ item.icon }}</text>
				</view>
				<view class="card-content">
					<text class="card-title">{{ item.title }}</text>
					<text class="card-desc">{{ item.description }}</text>
				</view>
				<view class="card-badge" v-if="item.badge > 0">
					<text class="badge-text">{{ item.badge }}</text>
				</view>
			</view>
		</view>

		<!-- 行动功能卡片网格 -->
		<view class="action-function-grid">
			<view
				v-for="(item, index) in actionFunctionList"
				:key="index"
				class="function-card"
				:style="{
					'--card-accent-color': item.color,
					'--card-accent-rgb': hexToRgb(item.color) ? `${hexToRgb(item.color).r}, ${hexToRgb(item.color).g}, ${hexToRgb(item.color).b}` : '248, 250, 252'
				}"
				@click="navigateToFunction(item)"
			>
				<view class="card-icon" :style="{ backgroundColor: item.color }">
					<text class="icon-text">{{ item.icon }}</text>
				</view>
				<view class="card-content">
					<text class="card-title">{{ item.title }}</text>
					<text class="card-desc">{{ item.description }}</text>
				</view>
				<view class="card-badge" v-if="item.badge > 0">
					<text class="badge-text">{{ item.badge }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 查看功能列表数据
				viewFunctionList: [
					{
						id: 'my-work',
						title: '我的工作',
						description: '查看我创建的JSA和申请的许可',
						icon: '👤',
						color: '#94a3b8',
						url: '/pages/my-work/my-work',
						badge: 0 // 将通过computed动态计算
					},
					{
						id: 'jsa-confirm',
						title: 'JSA确认',
						description: '确认JSA工作安全分析',
						icon: '✅',
						color: '#86efac',
						url: '/pages/jsa/confirm/confirm',
						badge: 3
					},
					{
						id: 'permit-approval',
						title: '许可审批',
						description: '审批工作许可证申请',
						icon: '🔍',
						color: '#fca5a5',
						url: '/pages/permit/approval/approval',
						badge: 5
					},
					{
						id: 'points-management',
						title: '积分管理',
						description: '积分登记和审批管理',
						icon: '⭐',
						color: '#cbd5e1',
						url: '/pages/points/management/management',
						badge: 0
					}
				],
				// 行动功能列表数据
				actionFunctionList: [
					{
						id: 'vehicle-record',
						title: '运输车登记',
						description: '登记运输车进出记录',
						icon: '🚛',
						color: '#fbbf24',
						url: '/pages/vehicle/record/record',
						badge: 0
					},
					{
						id: 'gas-detection',
						title: '气体检测',
						description: '进行气体安全检测',
						icon: '🌡️',
						color: '#a7f3d0',
						url: '/pages/gas/detection/detection',
						badge: 0
					}
				],
				// 主要行动按钮
				mainActionButtons: [
					{
						id: 'create-jsa',
						title: '创建JSA',
						description: '新建工作安全分析',
						icon: '📝',
						color: '#3b82f6',
						url: '/pages/jsa/create/create'
					},
					{
						id: 'apply-permit',
						title: '申请许可',
						description: '申请工作许可证',
						icon: '🎫',
						color: '#10b981',
						url: '/pages/permit/apply/apply'
					}
				]
			}
		},
		computed: {
			// 计算我的工作的待处理数量
			myWorkBadgeCount() {
				// 模拟数据：待确认的JSA数量 + 待审批的许可数量
				const pendingJsaCount = 1; // 假设有1个待确认的JSA
				const pendingPermitCount = 1; // 假设有1个待审批的许可
				return pendingJsaCount + pendingPermitCount;
			},
			// 合并查看功能列表和行动功能列表
			functionList() {
				const allFunctions = [...this.viewFunctionList, ...this.actionFunctionList];
				return allFunctions.map(item => {
					const rgbColor = this.hexToRgb(item.color);
					const rgbString = rgbColor ? `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}` : '248, 250, 252';

					if (item.id === 'my-work') {
						return {
							...item,
							badge: this.myWorkBadgeCount,
							rgbColor: rgbString
						};
					}
					return {
						...item,
						rgbColor: rgbString
					};
				});
			}
		},
		methods: {
			// 将十六进制颜色转换为RGB对象
			hexToRgb(hex) {
				const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
				return result ? {
					r: parseInt(result[1], 16),
					g: parseInt(result[2], 16),
					b: parseInt(result[3], 16)
				} : null;
			},
			// 导航到功能页面
			navigateToFunction(item) {
				console.log('尝试跳转到:', item.title, item.url)

				// 检查页面是否存在
				if (!item.url) {
					uni.showToast({
						title: '页面路径未配置',
						icon: 'none'
					})
					return
				}

				// 直接跳转到对应页面
				uni.navigateTo({
					url: item.url,
					success: () => {
						console.log('成功跳转到:', item.title)
					},
					fail: (err) => {
						console.error('跳转失败:', err)
						// 尝试备用方案
						console.log('尝试备用跳转方案')
						try {
							// #ifdef H5
							if (typeof window !== 'undefined' && window.location) {
								const baseUrl = window.location.origin
								const fullUrl = baseUrl + '/#/' + item.url.replace(/^\//, '')
								window.location.href = fullUrl
							}
							// #endif
						} catch (fallbackErr) {
							console.error('备用方案也失败:', fallbackErr)
							uni.showToast({
								title: '页面跳转失败',
								icon: 'none'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	padding: 0;
	background: #f8fafc;
	min-height: 100vh;
	padding-bottom: 40rpx;
	position: relative;
}

	.view-function-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32rpx;
		padding: 16rpx 40rpx 32rpx;
		max-width: 840rpx;
		margin: 0 auto;
	}

	.action-function-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32rpx;
		padding: 0 40rpx 80rpx;
		max-width: 840rpx;
		margin: 0 auto;
	}

.main-action-bar {
	display: flex;
	flex-direction: row;
	gap: 32rpx;
	padding: 24rpx 40rpx 20rpx;
	max-width: 840rpx;
	margin: 0 auto;
	background: transparent;
	justify-content: center;
}

	.main-action-button {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
		background: rgba(255, 255, 255, 0.95);
		border: 1rpx solid rgba(0, 0, 0, 0.08);
		border-radius: 12rpx;
		padding: 20rpx 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		position: relative;
		overflow: hidden;
		cursor: pointer;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(135deg,
				rgba(var(--action-color-rgb, 59, 130, 246), 0.05) 0%,
				rgba(var(--action-color-rgb, 59, 130, 246), 0.02) 50%,
				transparent 100%);
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
			border-color: rgba(0, 0, 0, 0.12);

			.action-icon {
				transform: scale(1.05);
			}

			.action-arrow {
				color: var(--action-color, #3b82f6);
				transform: translateX(4rpx);
			}
		}

		&:active {
			transform: translateY(-2rpx);
			transition: all 0.1s ease;
		}
	}

	.action-icon {
		width: 64rpx;
		height: 64rpx;
		border-radius: 12rpx;
		background: var(--action-color, #3b82f6);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		transition: all 0.3s ease;
		flex-shrink: 0;
	}

	.action-icon-text {
		font-size: 28rpx;
		position: relative;
		z-index: 1;
	}

	.action-content {
		flex: 1;

		.action-title {
			display: block;
			font-size: 30rpx;
			font-weight: 600;
			color: #1e293b;
			line-height: 1.2;
		}
	}

	.action-arrow {
		color: #94a3b8;
		font-size: 24rpx;
		font-weight: 400;
		transition: all 0.3s ease;
		margin-left: 12rpx;
		flex-shrink: 0;
	}

	
	.function-card {
			background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
			backdrop-filter: blur(20rpx);
			border-radius: 24rpx;
			padding: 32rpx 24rpx 32rpx 40rpx;
			border: 1rpx solid rgba(255, 255, 255, 0.2);
			border-left: 6rpx solid var(--card-accent-color, #e2e8f0);
			position: relative;
			box-shadow:
				0 8rpx 32rpx rgba(0, 0, 0, 0.08),
				0 2rpx 16rpx rgba(0, 0, 0, 0.04),
				inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
			transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 100%;
				background: linear-gradient(135deg,
					rgba(var(--card-accent-rgb, 248, 250, 252), 0.03) 0%,
					rgba(var(--card-accent-rgb, 248, 250, 252), 0.01) 50%,
					transparent 100%);
				pointer-events: none;
				border-radius: 24rpx;
			}

			&::after {
				content: '';
				position: absolute;
				top: 24rpx;
				left: 28rpx;
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background: var(--card-accent-color, #e2e8f0);
				box-shadow:
					0 4rpx 12rpx rgba(var(--card-accent-rgb, 248, 250, 252), 0.3),
					0 0 20rpx rgba(var(--card-accent-rgb, 248, 250, 252), 0.1);
				animation: gentlePulse 3s ease-in-out infinite;
			}

			&:hover {
				transform: translateY(-8rpx) scale(1.02);
				box-shadow:
					0 20rpx 60rpx rgba(0, 0, 0, 0.12),
					0 8rpx 24rpx rgba(0, 0, 0, 0.08),
					inset 0 1rpx 0 rgba(255, 255, 255, 0.4);
				border-color: rgba(var(--card-accent-rgb, 248, 250, 252), 0.3);

				&::before {
					background: linear-gradient(135deg,
						rgba(var(--card-accent-rgb, 248, 250, 252), 0.06) 0%,
						rgba(var(--card-accent-rgb, 248, 250, 252), 0.02) 50%,
						transparent 100%);
				}

				&::after {
					animation-duration: 1.5s;
					box-shadow:
						0 6rpx 16rpx rgba(var(--card-accent-rgb, 248, 250, 252), 0.4),
						0 0 30rpx rgba(var(--card-accent-rgb, 248, 250, 252), 0.2);
				}
			}

			&:active {
				transform: translateY(-4rpx) scale(0.98);
				transition: all 0.1s ease;
			}
		
		.card-icon {
			width: 96rpx;
			height: 96rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 28rpx;
			position: relative;
			box-shadow:
				0 8rpx 24rpx rgba(0, 0, 0, 0.12),
				inset 0 2rpx 0 rgba(255, 255, 255, 0.2);
			transition: all 0.3s ease;

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				border-radius: 20rpx;
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
				opacity: 0;
				transition: opacity 0.3s ease;
			}

			.icon-text {
				font-size: 48rpx;
				position: relative;
				z-index: 1;
				filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
			}
		}

		&:hover .card-icon {
			transform: scale(1.05);
			box-shadow:
				0 12rpx 32rpx rgba(0, 0, 0, 0.15),
				inset 0 2rpx 0 rgba(255, 255, 255, 0.3);

			&::before {
				opacity: 1;
			}
		}
		
		.card-content {
			position: relative;
			z-index: 1;

			.card-title {
				display: block;
				font-size: 32rpx;
				font-weight: 700;
				color: #1e293b;
				letter-spacing: 0.3rpx;
				line-height: 1.2;
				margin-bottom: 12rpx;
				text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
				transition: color 0.3s ease;
			}

			.card-desc {
				display: block;
				font-size: 22rpx;
				color: #64748b;
				line-height: 1.4;
				font-weight: 400;
				opacity: 0.85;
				transition: all 0.3s ease;
			}
		}

		&:hover .card-content {
			.card-title {
				color: #0f172a;
			}

			.card-desc {
				opacity: 0.95;
				color: #475569;
			}
		}
		
		.card-badge {
			position: absolute;
			top: 24rpx;
			right: 24rpx;
			background: linear-gradient(135deg, #ef4444, #dc2626);
			border-radius: 50%;
			width: 48rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow:
				0 4rpx 12rpx rgba(239, 68, 68, 0.3),
				0 0 0 2rpx rgba(255, 255, 255, 0.5);
			border: 2rpx solid rgba(255, 255, 255, 0.8);
			animation: gentlePulse 2.5s ease-in-out infinite;
			transition: all 0.3s ease;

			.badge-text {
				color: #fff;
				font-size: 24rpx;
				font-weight: 800;
				text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
			}
		}

		&:hover .card-badge {
			animation-duration: 1.2s;
			box-shadow:
				0 6rpx 16rpx rgba(239, 68, 68, 0.4),
				0 0 0 3rpx rgba(255, 255, 255, 0.7);
		}
	}

	@keyframes gentlePulse {
		0%, 100% {
			transform: scale(1);
			opacity: 1;
		}
		50% {
			transform: scale(1.1);
			opacity: 0.8;
		}
	}

	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.container {
			padding-bottom: 40rpx;
		}

		.view-function-grid {
			grid-template-columns: 1fr;
			gap: 28rpx;
			padding: 20rpx 28rpx 24rpx;
		}

		.action-function-grid {
			grid-template-columns: 1fr;
			gap: 28rpx;
			padding: 0 28rpx 60rpx;
		}

		.function-card {
			padding: 28rpx 20rpx 28rpx 32rpx;
			border-radius: 20rpx;

			&::after {
				width: 14rpx;
				height: 14rpx;
				top: 20rpx;
				left: 24rpx;
			}
		}

		.main-action-bar {
			padding: 32rpx 16rpx 20rpx;
			flex-direction: column;
			gap: 16rpx;
		}

		.main-action-button {
			padding: 16rpx 20rpx;
			border-radius: 10rpx;

			.action-icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 16rpx;

				.action-icon-text {
					font-size: 24rpx;
				}
			}

			.action-content {
				.action-title {
					font-size: 26rpx;
				}
			}

			.action-arrow {
				font-size: 20rpx;
				margin-left: 8rpx;
			}
		}
	}
</style>
